import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  FlatList,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/MaterialIcons';

const TransactionHistoryScreen = ({ navigation }) => {
  const [selectedFilter, setSelectedFilter] = useState('all');
  
  const transactions = [
    {
      id: '1',
      type: 'deposit',
      coin: 'BTC',
      amount: 0.5234,
      value: 12450.32,
      date: '2024-01-15',
      time: '14:30',
      status: 'completed',
      txId: 'tx123456789',
    },
    {
      id: '2',
      type: 'withdraw',
      coin: 'ETH',
      amount: 2.3456,
      value: 4567.89,
      date: '2024-01-14',
      time: '09:15',
      status: 'completed',
      txId: 'tx987654321',
    },
    {
      id: '3',
      type: 'deposit',
      coin: 'USDT',
      amount: 1000,
      value: 1000,
      date: '2024-01-13',
      time: '16:45',
      status: 'pending',
      txId: 'tx456789123',
    },
    {
      id: '4',
      type: 'deposit',
      coin: 'BNB',
      amount: 5.6789,
      value: 2345.67,
      date: '2024-01-12',
      time: '11:20',
      status: 'completed',
      txId: 'tx789123456',
    },
    {
      id: '5',
      type: 'withdraw',
      coin: 'BTC',
      amount: 0.1234,
      value: 3456.78,
      date: '2024-01-11',
      time: '20:10',
      status: 'failed',
      txId: 'tx321654987',
    },
  ];

  const filters = [
    { key: 'all', label: '全部', icon: 'list' },
    { key: 'deposit', label: '存入', icon: 'arrow-downward' },
    { key: 'withdraw', label: '提取', icon: 'arrow-upward' },
  ];

  const filteredTransactions = selectedFilter === 'all' 
    ? transactions 
    : transactions.filter(tx => tx.type === selectedFilter);

  const getTransactionIcon = (type) => {
    switch (type) {
      case 'deposit':
        return 'arrow-downward';
      case 'withdraw':
        return 'arrow-upward';
      default:
        return 'swap-horiz';
    }
  };

  const getStatusColor = (status) => {
    switch (status) {
      case 'completed':
        return '#4CAF50';
      case 'pending':
        return '#ff9800';
      case 'failed':
        return '#f44336';
      default:
        return '#a0a0a0';
    }
  };

  const getStatusText = (status) => {
    switch (status) {
      case 'completed':
        return '已完成';
      case 'pending':
        return '处理中';
      case 'failed':
        return '失败';
      default:
        return '未知';
    }
  };

  const renderTransaction = ({ item }) => (
    <TouchableOpacity style={styles.transactionItem}>
      <View style={styles.transactionLeft}>
        <View style={[
          styles.transactionIcon,
          { backgroundColor: item.type === 'deposit' ? '#4CAF50' : '#f44336' }
        ]}>
          <Icon name={getTransactionIcon(item.type)} size={20} color="#fff" />
        </View>
        <View>
          <Text style={styles.transactionCoin}>{item.coin}</Text>
          <Text style={styles.transactionDate}>{item.date} {item.time}</Text>
        </View>
      </View>
      <View style={styles.transactionRight}>
        <Text style={[
          styles.transactionAmount,
          { color: item.type === 'deposit' ? '#4CAF50' : '#f44336' }
        ]}>
          {item.type === 'deposit' ? '+' : '-'} {item.amount} {item.coin}
        </Text>
        <Text style={styles.transactionValue}>${item.value.toLocaleString()}</Text>
        <Text style={[styles.transactionStatus, { color: getStatusColor(item.status) }]}>
          {getStatusText(item.status)}
        </Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <LinearGradient colors={['#1a1a2e', '#16213e']} style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
        <View style={styles.header}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Icon name="arrow-back" size={24} color="#fff" />
          </TouchableOpacity>
          <Text style={styles.title}>交易记录</Text>
          <TouchableOpacity>
            <Icon name="filter-list" size={24} color="#fff" />
          </TouchableOpacity>
        </View>

        {/* Summary Cards */}
        <View style={styles.summaryContainer}>
          <View style={styles.summaryCard}>
            <Text style={styles.summaryLabel}>总存入</Text>
            <Text style={styles.summaryValue}>$15,234.56</Text>
          </View>
          <View style={styles.summaryCard}>
            <Text style={styles.summaryLabel}>总提取</Text>
            <Text style={styles.summaryValue}>$3,456.78</Text>
          </View>
        </View>

        {/* Filter Tabs */}
        <View style={styles.filterContainer}>
          {filters.map((filter) => (
            <TouchableOpacity
              key={filter.key}
              style={[
                styles.filterButton,
                selectedFilter === filter.key && styles.selectedFilter,
              ]}
              onPress={() => setSelectedFilter(filter.key)}
            >
              <Icon name={filter.icon} size={16} color={selectedFilter === filter.key ? '#fff' : '#a0a0a0'} />
              <Text style={[
                styles.filterText,
                selectedFilter === filter.key && styles.selectedFilterText,
              ]}>
                {filter.label}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        {/* Transaction List */}
        <View style={styles.transactionContainer}>
          <Text style={styles.sectionTitle}>
            {selectedFilter === 'all' ? '所有交易' : 
             selectedFilter === 'deposit' ? '存入记录' : '提取记录'}
          </Text>
          <FlatList
            data={filteredTransactions}
            renderItem={renderTransaction}
            keyExtractor={(item) => item.id}
            scrollEnabled={false}
            showsVerticalScrollIndicator={false}
          />
        </View>

        {/* Empty State */}
        {filteredTransactions.length === 0 && (
          <View style={styles.emptyState}>
            <Icon name="receipt-long" size={60} color="#a0a0a0" />
            <Text style={styles.emptyStateText}>暂无交易记录</Text>
            <TouchableOpacity
              style={styles.emptyStateButton}
              onPress={() => navigation.navigate('QRDeposit')}
            >
              <Text style={styles.emptyStateButtonText}>开始存款</Text>
            </TouchableOpacity>
          </View>
        )}
      </ScrollView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
  },
  summaryContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  summaryCard: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 15,
    padding: 20,
    width: '48%',
  },
  summaryLabel: {
    fontSize: 14,
    color: '#a0a0a0',
    marginBottom: 5,
  },
  summaryValue: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
  },
  filterContainer: {
    flexDirection: 'row',
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 25,
    padding: 5,
    marginBottom: 20,
  },
  filterButton: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 10,
    borderRadius: 20,
  },
  selectedFilter: {
    backgroundColor: '#4CAF50',
  },
  filterText: {
    color: '#a0a0a0',
    fontSize: 14,
    marginLeft: 5,
  },
  selectedFilterText: {
    color: '#fff',
  },
  transactionContainer: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 15,
  },
  transactionItem: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 15,
    padding: 15,
    marginBottom: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  transactionLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  transactionIcon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 15,
  },
  transactionCoin: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
  },
  transactionDate: {
    fontSize: 12,
    color: '#a0a0a0',
  },
  transactionRight: {
    alignItems: 'flex-end',
  },
  transactionAmount: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  transactionValue: {
    fontSize: 14,
    color: '#a0a0a0',
    marginVertical: 2,
  },
  transactionStatus: {
    fontSize: 12,
    fontWeight: 'bold',
  },
  emptyState: {
    alignItems: 'center',
    marginTop: 50,
  },
  emptyStateText: {
    color: '#a0a0a0',
    fontSize: 16,
    marginTop: 10,
    marginBottom: 20,
  },
  emptyStateButton: {
    backgroundColor: '#4CAF50',
    borderRadius: 25,
    paddingVertical: 15,
    paddingHorizontal: 30,
  },
  emptyStateButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default TransactionHistoryScreen;
